vue nuxt window is not defined 或 document is not defined错误

目录
  1. 问题
  2. 原因
  3. 解决

问题

vue nuxt 中出现 window is not defined 或 document is not defined 错误。

原因

vue服务端渲染ssr使用了客户端的一些对象，即代码中使用了window对象或document对象，可能是由于引入的第三方组件中操作了这些对象，也可能是自己的代码使用了它们。

解决

1、由于引入部分第三方组件导致的错误可以通过配置插件ssr为false来解决。

1
2
3
4
5
6
7
...
plugins: [
    ... 
    { src: '~/plugins/xxx', ssr: false }，
    ...
]
...

2、由于自己操作window对象在网上找了半天都没有解决办法
基本都是第三方组件的方案或者是官网上下面的无效方案

1
2
3
4
// 截止2019-06-02 亲测无效
if (process.client) {
  require('external_library')
}

终于在缩小搜索时间后找到了别人的解决方案。
在.vue文件中的window上操作的代码外加一层判断，和官网的方案其实差不多，就是官网的require是什么鬼，容易误解！！！也是我自己笨！！

1
2
3
4
// 正确的使用办法
if (process.client) {
    window.xxx
}

特别小的问题，花了较多时间，遂记录一下。

参考：
Nuxt中关于window or document is not defined的问题总结